<template>
  <div class="UserHomePagebox">
    <!-- 第一层盒子 -->
    <div class="topbox">
      <!-- 基本信息 -->
      <div class="toplittlebox">
        <div class="titlebox">
          <div class="title">基本信息</div>
          <div>
            <el-select v-model="companyId" placeholder="" size="mini" @change="getlist" v-show="!User">
              <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
            </el-select> 
          </div>
        </div>
        <div class="jibenxinxibody">
          <div class="imageandname">
            <div class="image">
              <img class="images" :src="'data:image/png;base64,' +userentity.pictureFile" alt="">
            </div>
            <div class="name">
              <div class="align classname">名称：</div>
              <div class="align classhangye">{{ userentity.name }}</div>
              <div class="align classname">行业：</div>
              <div class="align classhangye">{{ userentity.trade }}</div>
            </div>
          </div>
          <div class="foot">
            <span class="classname">地址: </span> 
            <span class="classhangye"> {{ userentity.address }}</span>
          </div>
        </div>
      </div>
      <!-- 能耗概况 -->
      <div class="toplittlebox">
        <div class="titlebox">
          <div class="title">能耗概况</div>
          <div>
            <el-select v-model="model" placeholder="" size="mini" @change="getnenghaogaikuang">
              <el-option
                class="option"
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.code">
                </el-option>
            </el-select> 
          </div>
        </div>
        <div class="gaikuobox">
          <div class="gaikuolittlebox">
            <div class="danwei chang">今日({{ model=='01'?'kWh':'m³' }})</div>
            <div class="number blue">{{ gaikuangentity.todayValue }}</div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">当月({{ model=='01'?'kWh':'m³' }})</div>
            <div class="number blue">{{ gaikuangentity.thisMonthValue }}</div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">当年({{ model=='01'?'kWh':'m³' }})</div>
            <div class="number blue">{{ gaikuangentity.thisYearValue }}</div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">日环比</div>
            <div class="number blue">
              <span :style="{color:gaikuangentity.dayHbValue>0?'#E72F2B':'#36B336'}">{{ gaikuangentity.dayHbValue }}%</span>
              <i v-if="gaikuangentity.dayHbValue>0" class="iconfont icon-xiangshangjiantou"></i>
              <i v-else class="iconfont icon-xiangxiajiantou1"></i>
            </div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">月环比</div>
            <div class="number blue">
              <span :style="{color:gaikuangentity.monthHbValue>0?'#E72F2B':'#36B336'}">{{ gaikuangentity.monthHbValue }}%</span>
              <i v-if="gaikuangentity.monthHbValue>0" class="iconfont icon-xiangshangjiantou"></i>
              <i v-else class="iconfont icon-xiangxiajiantou1"></i>
            </div>
          </div>
          <div class="gaikuolittlebox">
            <div class="danwei chang">年环比</div>
            <div class="number blue">
              <span :style="{color:gaikuangentity.yearHbValue>0?'#E72F2B':'#36B336'}">{{ gaikuangentity.yearHbValue }}%</span>
              <i v-if="gaikuangentity.yearHbValue>0" class="iconfont icon-xiangshangjiantou"></i>
              <i v-else class="iconfont icon-xiangxiajiantou1"></i>
            </div>
          </div>
        </div>
      </div>
      <!-- 同环比分析 -->
      <div class="toplittlebox">
        <div class="titlebox">
          <div class="title">同环比分析</div>
          <div>
            <el-select v-model="energyType" placeholder="" size="mini" @change="gettonghuanbi">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.name"
                  :value="item.code">
                </el-option>
            </el-select> 
          </div>
        </div>
        <!-- 图标盒子 -->
         <div style="height: 85%;margin-top: 10px;overflow: hidden;" ref="tonghuanbifenxi"></div>
      </div>
    </div>
    <!-- 第二层盒子 -->
    <div class="bodybox">
      <UserMiddle :companyId="companyId" ref="UserMiddle"></UserMiddle>
    </div>
    <!-- 第三层盒子 -->
    <div class="footerbox">
     <UserFooter :companyId="companyId" :componobj="componobj" ref="UserFooter"></UserFooter>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getuserjibenxinxiapi,getmemghaigaikuangapi,gettonghuanbiapi} from '@/api/energy-consumption/GeneralSituation/UserPage'
import {getnengyuantypeapi} from '@/api/energy-consumption/Basic-information/gateway'
import { getyongdianlistapi } from '@/api/energy-consumption/Basic-information/medium'
import UserMiddle from './usermiddle.vue'
import UserFooter from './userfooter.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    UserMiddle,
    UserFooter
  },
  data() {
    return {
      model: '',
      energyType:'',
      companyId:'',
      yonghulist:[],
      options: [],
      userentity:{},
      gaikuangentity: {},
      componobj:{},
      User:{}
    };
  },

  async mounted() {
    this.User = this.$route.query.UserInfo
    // 判断是否为路由跳转过来
    if (this.User) {
      this.componobj = this.User
      this.$set(this,'companyId',this.User.id)
    } else {
      // 获取用电单位
      const { data: { list } } = await getyongdianlistapi()
      this.yonghulist = list
      this.componobj = list[0]
      const companyId = localStorage.getItem('companyId')
      // 判断当前从本地取值是否在下拉列表当中
      const isBuildIdInArray = this.yonghulist.some(item => item.id == companyId);
      if (isBuildIdInArray) {
        this.$set(this,'companyId',companyId?+companyId:list[0].id)
      } else {
        this.$set(this,'companyId',list[0].id)
      }
    }
    // 获取能源介质
    const jiezhi = await getnengyuantypeapi()
    this.options = jiezhi.data.list
    this.$set(this,'model', jiezhi.data.list[0].code)
    this.$set(this, 'energyType', jiezhi.data.list[0].code)
    this.getlist(this.companyId)
  },

  methods: {
    async getlist(val) {
      if (!this.User) {
        localStorage.setItem('companyId', val)
        this.componobj=this.yonghulist.filter(ele=>this.companyId==ele.id)[0]
      }
      // 获取基本信息
      const {data:{entity}} = await getuserjibenxinxiapi({ companyId: this.companyId })
      this.userentity = entity
      this.getnenghaogaikuang()
      this.gettonghuanbi()
      this.$refs.UserMiddle.getmiddlelist()
      this.$refs.UserFooter.getfooterlist()
    },
    // 获取能耗概况信息
    async getnenghaogaikuang() {
      const {data:{entity}} = await getmemghaigaikuangapi({ companyId: this.companyId, energyType: this.model })
      this.gaikuangentity=entity
    },
    // 获取同环比分析
    async gettonghuanbi() {
      var chartDom = this.$refs.tonghuanbifenxi
      var myChart = echarts.init(chartDom);
      var option;
      const colorlist =['#16ccc0','#1a90fe']
      const { data: { list } } = await gettonghuanbiapi({ companyId: this.companyId, energyType: this.energyType })
            const xAxisData = [
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12'
      ]
      const series = list.map((yearData, index) => {
        const monthlyData = new Array(12).fill(null)
        yearData.datalist.forEach((item) => {
          const month = item.timeReading.split('-')[1]
          const monthIndex = parseInt(month, 10) - 1
          monthlyData[monthIndex] = parseFloat(item.valueReading)
        })
        return {
          name: yearData.name,
          data: monthlyData,
          type: 'bar',
          itemStyle: {
            color: colorlist[index]
          }
        }
      })
      option = {
        tooltip: {
          trigger: 'axis',
          transitionDuration: 0,
          confine:true,
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: { right: '0' },
        grid: {
          left: '3%',
          right: '1%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.energyType=='01'?'电量(kWh)':this.energyType=='02'?'水量(m³)':'用气(m³)',
            axisLine: {
              show: true,
            },
          }
        ],
        series:series
      };
      myChart.clear();
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped lang="scss">

.title{
  font-weight: bold;
        font-size: 16px;
        color: #323232;
}
.UserHomePagebox{
  height: 100%;
  padding:5px 10px;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
    .topbox, .bodybox, .footerbox {
      /* height: 268px; */
      height: 33.333%;
      overflow: hidden;
    /* flex: 1; */
    margin: 5px 0; /* 设置上下外边距为10px */
    /* background-color: #fff; */
  }
  .topbox{
    /* height: 100%; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 10px;
    justify-content: space-between;
    .toplittlebox{
      height: 100%;
      background-color: #fff;
      padding:10px 20px;
      .jibenxinxibody{
        height: 90%;
        padding-top: 20px;
        .imageandname{
          height: 80%;
          display: flex;
          .image{
            width: 60%;
            height: 100%;
            .images{
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
          .name{
            width: 40%;
            padding-left: 20px;
            .align{
              height: 25%;
              display: flex;
              align-items: center;
            }
          }
        }
        .classname{
              font-size: 16px;
              color: #646464;
            }
            .classhangye{
              font-size: 18px;
              color: #323232;
            }
            .foot{
              margin-top: 10px;
            }
      }
      .titlebox{
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .gaikuobox{
        padding: 0px;
        height: 90%;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .gaikuolittlebox{
          width: 30%; /* 让小盒子平分大盒子的宽度 */
          height: 40%; /* 让小盒子平分大盒子的高度 */
          filter: drop-shadow(rgba(0, 0, 0, .15) 3px 3px 6px);
          background-color: #fff;
          border-radius: 15px;

          text-align: center;
          .danwei, .number{
             height: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             .iconfont{
              font-size: 30px;
             }
             .icon-xiangshangjiantou{
              color: #E72F2B;
             }
             .icon-xiangxiajiantou1{
              color: #36B336;
             }
          }
          .chang{
            font-size: 16px;
            color: #646464;
          }
          .blue{
            font-size: 22px;
            color: #1A90FE;
            white-space: nowrap; /* 防止换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 添加省略号 */
          }
        }
      }
    }
  }
}
</style>